<template>
    <div class="app-container">
        <div class="head">
            <el-button @click="fastVClick" size="mini" type="primary" plain
                icon="el-icon-s-promotion">快捷查询(全校数据)</el-button>
            <el-button @click="wenmingVClick" size="mini" type="primary" plain icon="el-icon-location">文明宿舍</el-button>
        </div>
        <div>
            <div class="new-style" v-show="parkV">
                <div class="middle">
                    <div class="park-div" @click="lookBilding(v)" v-for="(v, i) in init_park_list" :key="i">
                        <div>{{ (v.campusName + '·' + v.parkName).length > 8 ? v.parkName : v.campusName + '·' +
                            v.parkName }}
                        </div>
                        <div class="num"
                            :style="{ color: customColorMethod(isNaN(v.allIn / v.all) ? 0 : Math.round(v.allIn / v.all * 10000) / 100) }">
                            {{ v.allIn }}</div>
                        <div>
                            <i class="el-icon-office-building"></i>
                            <span>入住人数</span>
                        </div>
                        <el-progress :text-inside="true" text-color="#fff" define-back-color="#DDFFCD"
                            :color="customColorMethod(isNaN(v.allIn / v.all) ? 0 : Math.round(v.allIn / v.all * 10000) / 100)"
                            :stroke-width="22"
                            :percentage="isNaN(v.allIn / v.all) ? 0 : Math.round(v.allIn / v.all * 10000) / 100"
                            status="exception"></el-progress>
                    </div>
                    <div class="detail">
                        <div class="title">住宿人数详情</div>
                        <div class="table">
                            <table>
                                <tbody>
                                    <tr>
                                        <td>宿舍园区</td>
                                        <td>总床位</td>
                                        <td>男</td>
                                        <td>女</td>
                                        <td>空余床位</td>
                                        <td>最新统计时间</td>
                                    </tr>
                                    <tr v-for="(v, i) in init_park_list" :key="i">
                                        <td>
                                            {{ (v.campusName + '·' + v.parkName).length > 8 ? v.parkName : v.campusName
                                                + '·' +
                                                v.parkName }}</td>
                                        <td>{{ v.all }}</td>
                                        <td>{{ v.boyIn }}</td>
                                        <td>{{ v.girlIn }}</td>
                                        <td>{{ v.all - v.allIn }}</td>
                                        <td>{{ v.makeTime }}</td>
                                    </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="chart">
                    <div class="title">
                        <div>缴费详情</div>
                        <div class="legen">
                            <div>
                                <span></span>
                                <span>未确认费用</span>
                            </div>
                            <div>
                                <span></span>
                                <span>已经确认费用</span>
                            </div>
                        </div>
                        <div class="time">
                            更新时间：{{ update_time }}
                        </div>
                    </div>
                    <div id="chart" style="height: 500px;"></div>
                </div>

            </div>

            <transition name="el-zoom-in-top">
                <div class="campus-div" v-if="buildingV">
                    <p style="margin: 0.5rem 0.5rem 0 0.5rem;">
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item>
                                {{ nowChoose.campus }}
                            </el-breadcrumb-item>
                            <el-breadcrumb-item>{{ nowChoose.park }}</el-breadcrumb-item>
                            <el-breadcrumb-item @click.native="toPark">
                                <span style="color: lightskyblue;cursor: pointer;">点我返回</span>
                            </el-breadcrumb-item>
                        </el-breadcrumb>
                    </p>
                    <el-row style="padding: 0.5rem;">
                        <el-col :span="6" v-for="(v1, i1) in building_info" :key="i1">
                            <el-card :body-style="{ padding: '0px' }" style="margin: 0.5rem;width: 80%;">
                                <el-image :src="getImg(v1.image)" class="image" />
                                <div style="padding: 14px;">
                                    <span>{{ v1.parkName }} {{ v1.buildingName }} </span>
                                    <div class="bottom clearfix">
                                        <el-row>
                                            <el-col :span="12">
                                                <div class="time">拥有床位:{{ v1.bedCount }}</div>
                                            </el-col>
                                            <el-col :span="12">
                                                <div class="time">总房间数:{{ v1.totalRoom }}</div>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                <div class="time">入住人数:{{ v1.occupancy }}</div>
                                            </el-col>
                                            <el-col :span="12">
                                                <div class="time">有住房间数:{{ v1.totalRoom-v1.vacantRoom }}</div>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                <div class="time">空床位数:{{ v1.bedCount-v1.occupancy }}</div>
                                            </el-col>
                                            <el-col :span="12">
                                                <div class="time">空置房间数:{{ v1.vacantRoom }}</div>
                                            </el-col>
                                        </el-row>  
                                        <div style="height: 2rem;">
                                            <el-progress
                                                :percentage="v1.bedCount == 0 ? 0 : parseFloat((v1.occupancy / v1.bedCount * 100).toFixed(2))"
                                                :color="customColorMethod"></el-progress>
                                        </div>
                                        <el-button type="text" class="button" @click="lookDorm(v1)">查看宿舍</el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
            </transition>

        </div>



        <el-dialog :before-close="closeBuilding" :visible.sync="dormV" :title="buildingTitle" width="90%"
            :append-to-body="true" :destroy-on-close="true">
            <el-form ref="dormForm" :model="dormForm" :inline="true" label-width="120px" class="searchForm">
                <el-form-item label="年级" prop="gradeId">
                    <el-select size="mini" v-model="dormForm.gradeId" placeholder="请选择年级" filterable clearable>
                        <el-option v-for="(v, i) in gradeList" :key="i" :label="v.gradeName" :value="v.gradeId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学院" prop="deptId">
                    <el-select size="mini" @change="changeDept" v-model="dormForm.deptId" placeholder="请选择学院" filterable
                        clearable>
                        <el-option v-for="(v, i) in deptList" :key="i" :label="v.label" :value="v.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="专业" prop="majorId">
                    <el-select size="mini" @change="changeMajor" v-model="dormForm.majorId" placeholder="请先选择学院再选择专业"
                        filterable clearable>
                        <el-option v-for="(v, i) in majorList" :key="i" :label="v.majorName" :value="v.majorId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班级" prop="classId">
                    <el-select size="mini" v-model="dormForm.classId" placeholder="请先选择专业再选择班级" filterable clearable>
                        <el-option v-for="(v, i) in classList" :key="i" :label="v.className" :value="v.classId">
                        </el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="层" prop="floorId">
                    <el-select size="mini" v-model="dormForm.floorId" clearable>
                        <el-option v-for="(v, i) in floor_list" :key="i" :label="v.floor" :value="v.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="房间号" prop="roomNo">
                    <el-input size="mini" v-model="dormForm.roomNo" clearable />
                </el-form-item>
                <el-form-item label="学号" prop="stuNo">
                    <el-input size="mini" v-model="dormForm.stuNo" clearable />
                </el-form-item>
                <el-form-item label="学生姓名" prop="stuName">
                    <el-input size="mini" v-model="dormForm.stuName" clearable />
                </el-form-item>
                <el-form-item label="辅导员工号" prop="tNo">
                    <el-input size="mini" v-model="dormForm.tNo" clearable />
                </el-form-item>
                <el-form-item label="辅导员姓名" prop="teacherName">
                    <el-input size="mini" v-model="dormForm.teacherName" clearable />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleDorm">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetDorm">重置</el-button>
                </el-form-item>
            </el-form>

            <el-row>
                <el-col :span="2">
                    <div v-for="(v, i) in floor_list" :key="i">
                        <el-button @click="changeRoomFloor(v)" size="mini">{{ v.floor }}</el-button>
                    </div>
                </el-col>
                <el-col :span="22">
                    <div class="floor-room-list"
                        style="overflow-x: auto;height:11rem;width: 100%; white-space: nowrap;">
                        <div>
                            <div class="floor-room" v-for="(v, i) in floor_room_list" v-if="parseInt(v.roomNo) % 2 == 1"
                                :key="i">
                                <div>
                                    {{ v.roomNo }}
                                </div>
                                <div>
                                    床位数:{{ v.bedNum }}
                                </div>
                                <div>
                                    已住人数:{{ v.occupancy }}
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="floor-room" v-for="(v, i) in floor_room_list" v-if="parseInt(v.roomNo) % 2 == 0"
                                :key="i">
                                <div>
                                    {{ v.roomNo }}
                                </div>
                                <div>
                                    床位数:{{ v.bedNum }}
                                </div>
                                <div>
                                    已住人数:{{ v.occupancy }}
                                </div>
                            </div>
                        </div>
                    </div>

                </el-col>
            </el-row>


            <el-table :data="dorm_list" v-loading="dorm_loading">
                <el-table-column label="#" align="center" prop="id" width="80" />
                <el-table-column label="层" align="center" prop="floor" width="80" />
                <el-table-column label="房间号" align="center" prop="roomNo" width="80" />
                <el-table-column label="宿舍性别" align="center" prop="gender" width="80" />
                <el-table-column label="住宿金额" align="center" prop="chargeStandard" width="120" />
                <el-table-column label="床位数" align="center" prop="bedNum" width="80" />
                <el-table-column label="已住人数" align="center" prop="occupancy" width="80" />
                <el-table-column label="已住学生的学院" align="center">
                    <template slot-scope="scope">
                        <div v-html="scope.row.liveInDept" style="text-align: center;">
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="是否开放给新生宿舍分配" align="center">
                    <template slot-scope="scope">
                        <el-switch :disabled="scope.row.bedNum == scope.row.occupancy"
                            @change="changeDormIsNew(scope.row)" v-model="scope.row.isNew" active-text="是"
                            inactive-text="否" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
                            inactive-value="0">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-view"
                            @click="lookStu(scope.row)">查看学生</el-button>
                        <el-button @click="handleUpdate(scope.row)" size="mini" type="text" icon="el-icon-edit">
                            修改宿舍信息
                        </el-button>
                        <el-button @click="signWenming(scope.row)" size="mini" type="text" icon="el-icon-location">
                            标记为文明宿舍
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="dorm_total > 0" :total="dorm_total" :page.sync="dormForm.pageNum"
                :limit.sync="dormForm.pageSize" @pagination="listRoomDeptLive" />

        </el-dialog>

        <el-dialog :title="stuTitle" :visible.sync="stuV" :append-to-body="true" :destroy-on-close="true" width="80%">
            <el-row>
                <el-col :span="8" v-for="(v, i) in stu_list" :key="i">
                    <div class="avatar-wrapper">
                        <div>
                            <image-preview :ref="'img' + i" :src="getImg(v.avatar)" class="user-avatar" />
                        </div>
                        <div>学号:{{ v.stuNo }}</div>
                        <div>姓名:{{ v.stuName }}</div>
                        <div>学院:{{ v.deptName }}</div>
                        <div>专业:{{ v.majorName }}</div>
                        <div>班级:{{ v.className }}</div>
                        <div>
                            是否是宿舍长:{{ v.isDormitoryHead == 1 ? "是" : "否" }}
                            <el-button @click="changeHead(v.stuNo)" type="text" icon="el-icon-edit" circle></el-button>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-dialog>


        <el-dialog title="快捷查询" :visible.sync="fastV" width="90%" :append-to-body="true" :destroy-on-close="true">
            <el-form ref="fastForm" :model="fastForm" :inline="true" label-width="120px" class="searchForm">
                <el-form-item label="校区" prop="campusId">
                    <el-select @change="changeFastCampus" size="mini" v-model="fastForm.campusId" placeholder="请选择校区"
                        filterable clearable>
                        <el-option v-for="(v, i) in campus_list" :key="i" :label="v.name" :value="v.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="园区" prop="parkId">
                    <el-select @change="changeFastPark" size="mini" v-model="fastForm.parkId" placeholder="请先选择校区再选择园区"
                        filterable clearable>
                        <el-option v-for="(v, i) in fast_park_list" :key="i" :label="v.name" :value="v.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="楼栋" prop="buildingId">
                    <el-select @change="changeFastBuilding" size="mini" v-model="fastForm.buildingId"
                        placeholder="请先选择园区再选择楼栋" filterable clearable>
                        <el-option v-for="(v, i) in fast_building_list" :key="i" :label="v.name" :value="v.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="层" prop="floorId">
                    <el-select size="mini" v-model="fastForm.floorId" clearable>
                        <el-option v-for="(v, i) in fast_floor_list" :key="i" :label="v.floor"
                            :value="v.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="房间号" prop="roomNo">
                    <el-input size="mini" v-model="fastForm.roomNo" clearable />
                </el-form-item>

                <el-form-item label="年级" prop="gradeId">
                    <el-select size="mini" v-model="fastForm.gradeId" placeholder="请选择年级" filterable clearable>
                        <el-option v-for="(v, i) in gradeList" :key="i" :label="v.gradeName" :value="v.gradeId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学院" prop="deptId">
                    <el-select size="mini" @change="changeFastDept" v-model="fastForm.deptId" placeholder="请选择学院"
                        filterable clearable>
                        <el-option v-for="(v, i) in deptList" :key="i" :label="v.label" :value="v.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="专业" prop="majorId">
                    <el-select size="mini" @change="changeFastMajor" v-model="fastForm.majorId"
                        placeholder="请先选择学院再选择专业" filterable clearable>
                        <el-option v-for="(v, i) in fast_major_list" :key="i" :label="v.majorName" :value="v.majorId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班级" prop="classId">
                    <el-select size="mini" v-model="fastForm.classId" placeholder="请先选择专业再选择班级" filterable clearable>
                        <el-option v-for="(v, i) in fast_class_list" :key="i" :label="v.className" :value="v.classId">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="学号" prop="stuNo">
                    <el-input size="mini" v-model="fastForm.stuNo" clearable />
                </el-form-item>
                <el-form-item label="学生姓名" prop="stuName">
                    <el-input size="mini" v-model="fastForm.stuName" clearable />
                </el-form-item>
                <el-form-item label="辅导员工号" prop="tNo">
                    <el-input size="mini" v-model="fastForm.tNo" clearable />
                </el-form-item>
                <el-form-item label="辅导员姓名" prop="teacherName">
                    <el-input size="mini" v-model="fastForm.teacherName" clearable />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleFast">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetFast">重置</el-button>
                    <el-button icon="el-icon-download" size="mini" @click="doExport">导出</el-button>
                </el-form-item>

            </el-form>

            <el-table :data="fast_list" v-loading="fast_loading">
                <el-table-column label="#" align="center" prop="id" width="80" />
                <el-table-column label="校区" align="center" prop="campusName" width="120" />
                <el-table-column label="园区" align="center" prop="parkName" width="80" />
                <el-table-column label="楼栋" align="center" prop="buildingName" width="80" />
                <el-table-column label="层" align="center" prop="floor" width="80" />
                <el-table-column label="房间号" align="center" prop="roomNo" width="80" />
                <el-table-column label="宿舍性别" align="center" prop="gender" width="80" />
                <el-table-column label="住宿金额" align="center" prop="chargeStandard" width="120" />
                <el-table-column label="床位数" align="center" prop="bedNum" width="80" />
                <el-table-column label="已住人数" align="center" prop="occupancy" width="80" />
                <el-table-column label="已住学生的学院" align="center">
                    <template slot-scope="scope">
                        <div v-html="scope.row.liveInDept" style="text-align: center;">
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="是否开放给新生宿舍分配" align="center">
                    <template slot-scope="scope">
                        <el-switch :disabled="scope.row.bedNum == scope.row.occupancy"
                            @change="changeDormIsNew(scope.row)" v-model="scope.row.isNew" active-text="是"
                            inactive-text="否" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
                            inactive-value="0">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-view"
                            @click="lookStu(scope.row)">查看学生</el-button>
                        <el-button @click="handleUpdate(scope.row)" size="mini" type="text" icon="el-icon-edit">
                            修改宿舍信息
                        </el-button>
                        <el-button @click="signWenming(scope.row)" size="mini" type="text" icon="el-icon-location">
                            标记为文明宿舍
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="fast_total > 0" :total="fast_total" :page.sync="fastForm.pageNum"
                :limit.sync="fastForm.pageSize" @pagination="listFast" />


        </el-dialog>

        <el-dialog title="文明宿舍" width="90%" :visible.sync="wenmingV">
            <el-table :data="wenming_list">
                <el-table-column label="房间" align="center" prop="roomNo" />
                <el-table-column label="标记时间" align="center" prop="makeTime" width="150" />
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-delete-location"
                            @click="cancelWenming(scope.row)">取消标记</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="wenming_total > 0" :total="wenming_total" :page.sync="wenmingForm.pageNum"
                :limit.sync="wenmingForm.pageSize" @pagination="listWenming" />

        </el-dialog>


        <el-dialog title="修改宿舍" :visible.sync="updateV" width="500px" append-to-body>
            <el-form ref="updateForm" :model="updateForm" label-width="80px">
                <el-form-item class="look-form-item" label="宿舍楼" prop="buildingId">
                    <el-input v-model="updateForm.buildingName" disabled></el-input>
                </el-form-item>
                <el-form-item class="look-form-item" label="楼层" prop="floorId">
                    <el-input v-model="updateForm.floor" disabled></el-input>
                </el-form-item>
                <el-form-item class="look-form-item" label="房间号" prop="roomNo">
                    <el-input v-model.number="updateForm.roomNo" disabled placeholder="请输入房间号" />
                </el-form-item>
                <el-form-item class="look-form-item" label="床位数" prop="bedNum">
                    <el-input v-model.number="updateForm.bedNum" placeholder="请输入床位数" />
                </el-form-item>
                <el-form-item class="look-form-item" label="床位费" prop="bedChange">
                    <el-input v-model.number="updateForm.chargeStandard" placeholder="请输入床位费(/元)" />
                </el-form-item>
                <el-form-item class="look-form-item" label="入住人数" prop="occupancy">
                    <el-input v-model.number="updateForm.occupancy" disabled />
                </el-form-item>
                <el-form-item class="look-form-item" label="住宿性别" prop="gender">
                    <el-radio v-model="updateForm.gender" label="男">男</el-radio>
                    <el-radio v-model="updateForm.gender" label="女">女</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="doUpdate">确 定</el-button>
            </div>
        </el-dialog>



    </div>
</template>
<script>

import { listBuildingInfo } from "@/api/dormitory/new/total";
import {
    listAllCampus, listFloorByBuilding, listRoomDeptLive, listRoomStu, changeHead, changeDormIsNew,
    listParkByCampus, listBuildingByPark, signWenming, countAllParkBed, countStuIn, countDeptBed, countGenderBed,
    listRoomDeptLiveByFloor, countParkStuIn, countRecordConfirmStatus,

    updateDorm
} from "@/api/dormitory/basedata/dormitory";

import { getDeptName } from "@/api/system/dept";
import { listMajors } from "@/api/stuCQS/basedata/majors";
import { listClass } from "@/api/stuCQS/basedata/class";
import { listGrade } from "@/api/stuCQS/basedata/grade";


import { fullLoading, groupBy, getChineseKey, getImg, isEmpty } from "@/api/helpFunc";

import {
    listAllFloor
} from "@/api/dormitory/basedata/floor";

import lodash from "lodash";

import { listView, cancelWenming } from "@/api/dormitory/new/wenming";

import dayjs from "dayjs";

export default {
    name: "dms-total-jwc",
    data() {
        return {
            update_time: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),

            getImg,
            getChineseKey,
            isEmpty,
            campus_list: [],
            building_info: {},
            buildingTitle: '',
            dormV: false,
            dormForm: {
                buildingId: null,
                floorId: null,
                roomNo: null,
                stuNo: null,
                stuName: null,
                tNo: null,
                teacherName: null,
                deptId: null,
                majorId: null,
                classId: null,

                pageNum: 1,
                pageSize: 10,
            },

            floor_list: [],
            dorm_list: [],
            dorm_loading: false,
            dorm_total: 0,

            stu_list: [],
            stuV: false,
            stuTitle: "",

            tempDorm: {},

            fastV: false,

            deptList: [],//学院列表
            majorList: [],//专业列表
            classList: [],//班级列表
            gradeList: [],//年级列表

            fast_list: [],
            fast_total: 0,
            fast_loading: false,
            fastForm: {
                campusId: null,
                parkId: null,
                buildingId: null,
                floorId: null,
                roomNo: null,
                stuNo: null,
                stuName: null,
                tNo: null,
                teacherName: null,
                deptId: null,
                majorId: null,
                classId: null,

                pageNum: 1,
                pageSize: 10,
            },
            fast_park_list: [],
            fast_building_list: [],
            fast_floor_list: [],
            fast_class_list: [],
            fast_major_list: [],


            wenmingV: false,

            buildingV: false,
            parkV: true,
            park_list: [],

            temp_building_list: [],
            nowChoose: {
                campus: null,
                park: null
            },
            park_bed: [],

            stu_in_info: {
                yes: 0,
                all: 0,
                in: 0
            },
            dept_bed_list: [],
            stu_in_v: true,

            gender_bed_list: [],


            floor_room_list: [],



            wenming_list: [],
            wenming_total: 0,
            wenmingForm: {
                pageNum: 1,
                pageSize: 10,
            },


            init_park_list: [],

            updateForm: {

            },
            updateV: false,
            floorList: [],

            buildingList: [],
        }
    },
    created() {
        this.countParkStuIn();
        this.countGenderBed();
        this.countDeptBed();
        this.countStuIn();
        this.countAllParkBed();
        this.listGrade();
        this.listDept();
        this.listAllCampus();
        this.listBuildingInfo();
    },
    mounted() {
        this.drawChart();
    },
    methods: {

        async cancelWenming(row) {
            let id = row.id;
            let loading = fullLoading(this);
            let res = await cancelWenming(id);
            loading.close();
            if (res.code == 200) {
                this.$message.success("取消成功");
                this.listWenming();
            }
        },


        async doUpdate() {

            if (isEmpty(this.updateForm.bedNum)) {
                this.$message.info("请输入床位数");
                return;
            }
            if (this.updateForm.bedNum < this.updateForm.occupancy) {
                this.$message.info("床位数不能小于入住人数");
                return;
            }

            if (isEmpty(this.updateForm.chargeStandard)) {
                this.$message.info("请输入宿舍费");
                return;
            }
            let sdata = {
                id: this.updateForm.id,
                bedNum: this.updateForm.bedNum,
                chargeStandard: this.updateForm.chargeStandard,
                gender: this.updateForm.gender
            }
            let loading = fullLoading(this);
            let res = await updateDorm(sdata);
            loading.close();
            if (res.code == 200) {
                this.$modal.msgSuccess("修改成功");
                this.handleDorm();
                this.handleFast();
            }

        },

        handleUpdate(row) {
            console.log(row);
            this.updateForm = { ...row };
            this.updateV = true;

        },


        doExport() {
            this.download(
                "/dormitory/dms-dormitory/exportListRoomDeptLive", {
                ...this.fastForm,
            },
                `宿舍详细信息_${new Date().getTime()}.xlsx`
            );
        },

        async countParkStuIn() {
            let res = await countParkStuIn();
            if (res.code == 200) {
                this.init_park_list = [...res.data];
            }
        },

        async listWenming() {
            let loading = fullLoading(this);
            let res = await listView();
            loading.close();
            if (res.code == 200) {
                this.wenming_list = [...res.rows];
                this.wenming_total = res.total;
            }
        },

        closeBuilding() {
            this.resetDorm();
            this.dormV = false;
        },
        async changeRoomFloor(val) {
            this.dormForm.floorId = val.id;
            this.listRoomDeptLiveByFloor();
            this.listRoomDeptLive();
        },

        async listRoomDeptLiveByFloor() {
            this.floor_room_list = [];
            let params = {
                floorId: this.dormForm.floorId
            };
            let res = await listRoomDeptLiveByFloor(params);
            if (res.code == 200) {
                this.floor_room_list = [...res.data];
            }
        },

        async countGenderBed() {
            let res = await countGenderBed();
            if (res.code == 200) {
                this.gender_bed_list = [...res.data];
            }
        },
        async countDeptBed() {
            let res = await countDeptBed();
            if (res.code == 200) {
                this.dept_bed_list = [...res.data];
            }
        },

        customColorMethod(percentage) {
            if (percentage < 40) {
                return '#67c23a';
            } else if (percentage < 75) {
                return '#e6a23c';
            } else {
                return 'red';
            }
        },
        async countStuIn() {
            let res = await countStuIn();
            if (res.code == 200) {
                this.stu_in_info.yes = !isEmpty([...res.data][0].bedNum) ? [...res.data][0].bedNum : 0;
                this.stu_in_info.all = !isEmpty([...res.data][1].bedNum) ? [...res.data][1].bedNum : 0;
                this.stu_in_info.in = !isEmpty([...res.data][2].bedNum) ? [...res.data][2].bedNum : 0;
            }
        },
        async countAllParkBed() {
            let res = await countAllParkBed();
            if (res.code == 200) {
                this.park_bed = [...res.data];
            }
        },
        getParkBed(val) {
            let temp = {};
            this.park_bed.map(x => {
                if (x.parkName == val.parkName) {
                    temp = { ...x }
                }
            });
            return temp;
        },

        async wenmingVClick() {
            await this.listWenming();
            this.wenmingV = true;
        },

        async signWenming(dorm) {
            let loading = fullLoading(this);
            let res = await signWenming(dorm.id);
            loading.close();
            if (res.code == 200) {
                this.$message.success(res.msg);
            }
        },

        async listFast() {
            this.fast_loading = true;
            let res = await listRoomDeptLive(this.fastForm);
            this.fast_loading = false;
            if (res.code == 200) {
                this.fast_list = [...res.rows];
                this.fast_total = res.total;
            }
        },
        handleFast() {
            this.fastForm.pageNum = 1;
            this.listFast();
        },
        resetFast() {
            this.resetForm("fastForm");
            this.handleFast();
        },
        async changeFastBuilding(val) {
            this.fastForm.floorId = null;
            this.fast_floor_list = [];
            if (!isEmpty(val)) {
                let res = await listFloorByBuilding(this.fastForm.buildingId);
                if (res.code == 200) {
                    this.fast_floor_list = [...res.data];
                }
            }
        },
        async changeFastPark(val) {
            this.fastForm.buildingId = null;
            this.fastForm.floorId = null;

            this.fast_building_list = [];
            this.fast_floor_list = [];
            if (!isEmpty(val)) {
                let res = await listBuildingByPark(this.fastForm.parkId);
                if (res.code == 200) {
                    this.fast_building_list = [...res.data];
                }
            }
        },

        async changeFastCampus(val) {
            this.fastForm.parkId = null;
            this.fastForm.buildingId = null;
            this.fastForm.floorId = null;

            this.fast_park_list = [];
            this.fast_building_list = [];
            this.fast_floor_list = [];
            if (!isEmpty(val)) {
                let res = await listParkByCampus(this.fastForm.campusId);
                if (res.code == 200) {
                    this.fast_park_list = [...res.data];
                }
            }
        },

        async changeFastMajor() {
            this.fast_class_list = [];
            this.fastForm.classId = null;
            let sdata = {
                pageNum: 1,
                pageSize: 100,
                majorId: this.fastForm.majorId
            }
            let res = await listClass(sdata);
            this.fast_class_list = [...res.rows];
        },
        async changeFastDept() {
            this.fast_major_list = [];
            this.fast_class_list = [];
            this.fastForm.majorId = null;
            this.fastForm.classId = null;
            let sdata = {
                collegeId: this.fastForm.deptId,
                pageNum: 1,
                pageSize: 100
            }
            let res = await listMajors(sdata);
            this.fast_major_list = [...res.rows];
        },

        fastVClick() {
            this.fastV = true;
        },

        async changeMajor() {
            this.classList = [];
            this.dormForm.classId = null;
            let sdata = {
                pageNum: 1,
                pageSize: 100,
                majorId: this.dormForm.majorId
            }
            let res = await listClass(sdata);
            this.classList = [...res.rows];
        },
        async changeDept() {
            this.majorList = [];
            this.classList = [];
            this.dormForm.majorId = null;
            this.dormForm.classId = null;
            let sdata = {
                collegeId: this.dormForm.deptId,
                pageNum: 1,
                pageSize: 100
            }
            let res = await listMajors(sdata);
            this.majorList = [...res.rows];
        },
        async listDept() {
            let res = await getDeptName();
            this.deptList = [...res.data];
        },
        async listGrade() {
            let res = await listGrade();
            this.gradeList = [...res.rows];
        },


        async changeDormIsNew(dorm) {
            let loading = fullLoading(this);
            let res = await changeDormIsNew(dorm);
            loading.close();
            if (res.code == 200) {
                this.$message.success(res.msg);
                this.handleDorm();
                this.handleFast();
            } else {
                this.handleDorm();
                this.handleFast();
            }
        },
        async changeHead(stuNo) {
            this.$confirm('每间宿舍只能有一位宿舍长, 您确定要将这位同学设置为宿舍长吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let loading = fullLoading(this);
                let res = await changeHead(stuNo);
                loading.close();
                if (res.code == 200) {
                    this.$message.success(res.msg);
                    this.lookStu(this.tempDorm);
                }

            }).catch(() => {

            });
        },

        async lookStu(dorm) {
            this.tempDorm = { ...dorm };
            let loading = fullLoading(this);
            let res = await listRoomStu(dorm.id);
            loading.close();
            if (res.code == 200) {
                this.stu_list = [...res.data];
                this.stuTitle = this.buildingTitle + " " + dorm.floor + "层" + dorm.roomNo;
                this.stuV = true;
            }
        },

        handleDorm() {
            this.dormForm.pageNum = 1;
            if (!isEmpty(this.floor_list)) {
                if (isEmpty(this.dormForm.floorId)) {
                    this.dormForm.floorId = this.floor_list[0].id;
                }
            }
            this.listRoomDeptLiveByFloor();
            this.listRoomDeptLive();
        },
        resetDorm() {
            this.resetForm("dormForm");
            this.handleDorm();
        },
        async listRoomDeptLive() {
            this.dorm_loading = true;
            let res = await listRoomDeptLive(this.dormForm);
            this.dorm_loading = false;
            if (res.code == 200) {
                this.dorm_list = [...res.rows];
                this.dorm_total = res.total;
            }
        },

        async lookDorm(building) {
            this.buildingTitle = building.campusName + " " + building.parkName + " " + building.buildingName;
            this.dormForm.buildingId = building.id;
            this.dormForm.pageNum = 1;
            this.dormForm.pageSize = 10;
            let loading = fullLoading(this);
            listFloorByBuilding(building.id).then(res => {
                loading.close();
                if (res.code == 200) {
                    this.floor_list = [...res.data];
                    if (!isEmpty(this.floor_list)) {
                        this.dormForm.floorId = this.floor_list[0].id;
                        this.listRoomDeptLive();
                        this.listRoomDeptLiveByFloor();
                    }
                }
            });
            this.dormV = true;
        },


        async listAllCampus() {
            let res = await listAllCampus();
            if (res.code == 200) {
                this.campus_list = [...res.data];
            }
        },
        async lookBilding(v) {
            this.nowChoose.campus = v.campusName;
            this.nowChoose.park = v.parkName;

            let data = lodash.cloneDeep(this.temp_building_list);
            let temp = data.filter(x => x.parkName == v.parkName);
            this.building_info = [...temp];
            this.parkV = false;
            this.buildingV = true;
        },
        async listBuildingInfo() {
            let loading = fullLoading(this);
            let res = await listBuildingInfo();
            loading.close();
            if (res.code == 200) {
                let data = [...res.data];
                this.temp_building_list = [...data];

                let new_list = groupBy(data, (x) => { return x.campusName });
                Object.keys(new_list).forEach(key => {
                    let temp = [...new_list[key]];
                    let new_temp_list = groupBy(temp, (x) => { return x.parkName });
                    let temp_park_list = [];

                    Object.keys(new_temp_list).forEach(key1 => {
                        temp_park_list.push({ parkName: key1.replace('"', '').replace('\"', '') });
                    });
                    new_list[key] = [...temp_park_list];
                });

                this.park_list = { ...new_list };
            }
        },
        toPark() {
            this.buildingV = false;
            this.parkV = true;
        },
        async drawChart() {
            let dept_list = [];
            let all_list = [];
            let all_in_list = [];
            let res = await countRecordConfirmStatus();
            if (res.code == 200) {
                let data = [...res.data];
                data.map(x => {
                    dept_list.push(x.deptName);
                    all_list.push(x.all);
                    all_in_list.push(x.allIn);
                });
            }
            const chart = this.$echarts.init(document.getElementById("chart"));
            const option = {
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: [...dept_list]
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                series: [
                    {
                        name: 'Direct',
                        type: 'bar',
                        color: ["#EE6666"],
                        data: [...all_list]

                    },
                    {
                        name: 'Email',
                        type: 'bar',
                        stack: 'Ad',
                        color: ["#409EFF"],
                        data: [...all_in_list]
                    },
                ]
            }
            chart.setOption(option);

        }
    }
}

</script>
<style scoped lang="scss">
.look-form-item {
    margin-bottom: 1px
}


.app-container {
    background-color: #F6F9FC;

    .head {
        background-color: white;
        padding: 20px 0 20px 20px;
    }
}

.new-style {
    background-color: #F6F9FC;

    .head {
        display: flex;

        .left {
            color: #409EFF;
        }
    }

    .middle {
        margin-top: 20px;
        display: flex;

        &>div:not(:last-child) {
            width: 160px;
            height: 180px;
            background-color: white;
            margin-right: 10px;
            border-radius: 10px;
            color: #409EFF;

            display: flex;
            align-items: center;
            flex-direction: column;
            font-size: 14px;
            font-family: "PingFang sc";
            flex-shrink: 0;

            &>div:first-child {
                font-weight: 600;
            }

            &>div {
                margin: 10px 0 0 0;
            }

            .num {
                font-size: 30px;
                margin-top: 20px;
                font-weight: bold;

                &:nth-child(1) {
                    color: #91CC75;
                }

                &:nth-child(2) {
                    color: #FFCB58;
                }

                &:nth-child(3) {
                    color: #EE6666;
                }
            }

            .el-progress {
                width: 75%;
                margin-top: 20px;
            }
        }

        .detail {
            flex: 1;
            height: 180px;
            background-color: white;
            padding: 10px;
            font-size: 14px;
            border-radius: 10px;

            .title {
                color: #409EFF;
                text-align: left;
                margin: 0;
                font-weight: 600;
            }

            .table {
                table {
                    width: 100%;
                    margin-top: 10px;
                    border-collapse: collapse;

                    tr {
                        display: flex;
                        line-height: 28px;

                        td {
                            flex: 1;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;

                            &:not(:first-child) {
                                text-align: center;
                            }

                        }
                    }

                    tr:first-child {
                        color: #C4C4C4;
                    }
                }

            }
        }
    }

    .chart {
        margin-top: 20px;
        background-color: white;
        padding: 10px;
        border-radius: 10px;

        .title {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;

            &>div:first-child {
                color: #409EFF;
                font-weight: 600;

            }

            .legen {
                display: flex;

                &>div {
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    color: #999;

                    span:first-child {
                        width: 14px;
                        height: 14px;
                        background-color: #409EFF;
                        margin: 0 10px;
                    }

                    &:first-child span:first-child {
                        background-color: #FF7070;
                    }
                }
            }

            .time {
                color: #999;
            }
        }
    }
}

.floor-room-list::-webkit-scrollbar {
    width: 4px;
    height: 8px;
}

.floor-room-list::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background-color: lightseagreen;
    cursor: pointer;
}

.floor-room-list::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background-color: #d3dce6;
}


.floor-room {
    display: inline-block;
    width: 10rem;
    height: 4rem;
    border: 1px dotted lightskyblue;
    margin: 0.5rem;
    border-radius: 0.5rem;
    text-align: center
}

.tb-row {
    border-bottom: 1px dotted lightskyblue;
}

.tb-label {
    width: 19rem;
    text-align: left;
}

.searchForm {
    .el-form-item {
        margin-bottom: 0px;
    }
}


.avatar-wrapper {
    margin-top: 5px;
    margin-bottom: 1rem;
    position: relative;
    text-align: center;
    border-bottom: 1px dotted lightblue;

    .user-avatar {
        cursor: pointer;
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
}

.campus-div-first {
    width: fit-content;
    border: 1px dotted lightskyblue;
    margin: 1rem;
    border-radius: 1rem;
    display: inline-block;
    vertical-align: top;
}

.campus-div {
    width: 100%;
    border: 1px dotted lightskyblue;
    margin: 1rem;
    border-radius: 1rem;
}


.time {
    font-size: 13px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    height: 200px;
    display: block;
    margin: 0 auto;

    cursor: pointer;
    transition: 0.5s;
}

.image:hover {
    transform: scale(1.35);
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.park-div {
    cursor: pointer;
    transition: 0.5s;
}

.park-div:hover {
    transform: scale(1.1);
}
</style>